<template>
	<view class="container">
		<!-- 状态栏 -->
		<view :class="statusBarViewClass"></view>
		<!-- 导航栏 -->
		<view class="customer-nav-view nav-sticky">
			<view class="customer-nav-left">
				<uni-icons type="back" color='#000000' size="24" @click="goBackPage"></uni-icons>
			</view>
			<view class="customer-nav-title">
				我的收藏
			</view>
			<view class="customer-nav-right">
			</view>
		</view>
		<!-- 影视列表 -->
		<view class="video-list-view">
			<view class="video-list-content" v-if="video_list.length > 0">
				<view class="video-list-item" v-for="item,index in video_list" :key="index"
					@click="goMovDetailPage(item)" @longpress="openAlertDialog(item)">
					<!-- 或者 aspectFill -->
					<image class="video-list-item-img" mode="aspectFit"
						:src="item.image.toLowerCase().startsWith('http')?item.image:(api.host+item.image)">
					</image>
					<text class="video-list-item-name"> {{item.name}} </text>
					<text class="video-list-item-other">
						{{'观看进度：'+ getProgress(item.progress,item.movieNum) + '%' }}
					</text>
					<text class="video-list-item-other teshu-text" v-if="item.status == 1">
						有更新
					</text>
					<text class="video-list-item-other" v-else>
						<uni-dateformat :date="item.modifyTime" format="yyyy-MM-dd"></uni-dateformat>
					</text>
				</view>
			</view>
			<view class="video-list-content-empty" v-else>
				暂无数据
			</view>
		</view>
		<!-- 移除收藏提示窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="移除" :title="alertTitle" :content="alertContent"
				@confirm="setFavorite"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref,
		nextTick
	} from 'vue'
	import {
		onPullDownRefresh,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import api from '@/config/api'
	import request from '@/utils/request'
	import {
		showToast,
		getUserInfo,
		getUserToken
	} from '@/utils/utils'

	const statusBarViewClass = ref("status-bar-view-2")

	const alertDialog = ref(null)
	const alertTitle = ref("")
	const alertContent = ref("")
	const alertItem = ref({})

	const video_list = ref([])
	// 0 允许加载 1 没有数据了，停止加载 2 进行中
	const isOver = ref(0)
	const queryParam = ref({
		token: getUserToken(),
		pageNum: 1,
		pageSize: 60
	})

	onShow(() => {
		getDataList()
	})

	// 在组件卸载时
	onUnmounted(() => {});

	// 下拉刷新
	onPullDownRefresh(() => {
		// 重置页码
		queryParam.value.pageNum = 1
		isOver.value = 0
		// 加载数据
		getDataList()
		// 停止下拉刷新动画
		uni.stopPullDownRefresh()
	})

	// 上拉加载下一页
	onReachBottom(() => {
		nextPage()
	})

	// 获取影视列表数据
	const getDataList = () => {
		isOver.value = 2
		request.get(api.host + api.favoriteMovListUrl, queryParam.value)
			.then(result => {
				if (result.success) {
					let new_mov_list = result.data
					if (queryParam.value.pageNum === 1) {
						video_list.value = []
						if (new_mov_list.length > 0 && new_mov_list.length < queryParam.value.pageSize) {
							isOver.value = 1
							showToast('已全部加载完毕')
						} else {
							isOver.value = 0
						}
						// 先清空列表，等渲染完了，再赋值列表
						nextTick(() => {
							video_list.value = new_mov_list
						})
					} else {
						video_list.value.push(...new_mov_list)
						if (new_mov_list.length < queryParam.value.pageSize) {
							isOver.value = 1
							showToast('已全部加载完毕')
						} else {
							isOver.value = 0
						}
					}
				}
			})
	}

	// 下一页
	const nextPage = () => {
		if (isOver.value === 1) {
			showToast('没有更多了')
			return
		} else if (isOver.value === 2) {
			showToast('正在加载中')
			return
		}
		queryParam.value.pageNum = queryParam.value.pageNum + 1
		getDataList()
	}

	// 计算进度
	const getProgress = (progress, total) => {
		if (progress == total) {
			return "100"
		}
		// 向下取值
		let result = Math.floor(progress * 100 / total).toString()
		if (result == "0") {
			// 再小也不能为0呀
			return "0.1"
		}
		return result;
	}

	// 打开取消收藏提示框
	const openAlertDialog = (item) => {
		alertItem.value = item
		alertContent.value = "确认要从收藏移除<" + item.name + ">吗？"
		alertTitle.value = "移除收藏"
		alertDialog.value.open()
	}

	// 取消收藏
	const setFavorite = () => {
		request.post(api.host + api.setFavoriteUrl, {
			movieId: alertItem.value.id,
			token: getUserToken()
		}).then(result => {
			if (result.success) {
				video_list.value = video_list.value.filter(video => video.id != alertItem.value.id);
			}
		})
	}

	// 前往详情页面
	const goMovDetailPage = (item) => {
		uni.navigateTo({
			url: '/pages/mov_detail/mov_detail?movieId=' + item.id + '&num=' +
				(item.progress > 0 ? item.progress : item.movieNum),
		})
	}

	// 返回
	const goBackPage = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	@import url("favorite.css");
</style>